<script>
export default {
    name: "Pron",
    data() {
        return {
            list: [{
                ch: ['ai', 'ei'],
                pron: 'wav/pron/ai.wav'
            }, {
                ch: ['au', 'eau'],
                pron: 'wav/pron/eau.wav'
            }, {
                ch: ['aur'],
                pron: 'wav/pron/aur.wav'
            }, {
                ch: ['eu在词末开音节，/z/，/t/，/d/，/ʒ/前，如jeu'],
                pron: 'wav/pron/jeu.wav'
            }, {
                ch: ['eu其他情况，如jeune'],
                pron: 'wav/pron/jeune.wav'
            }, {
                ch: ['œu同eu'],
                pron: 'wav/pron/jeu.wav'
            }, {
                ch: ['œ'],
                pron: 'wav/pron/œ.wav'
            }, {
                ch: ['oi'],
                pron: 'wav/pron/toit.wav'
            }, {
                ch: ['ou'],
                pron: 'wav/pron/ou.wav'
            }, {
                ch: ['ou元音前读/w/，如joue'],
                pron: 'wav/pron/joue.wav'
            }, {
                ch: ['an', 'am', 'en', 'em'],
                pron: 'wav/pron/am.wav'
            }, {
                ch: ['in', 'im', 'ain', 'aim', 'ein'],
                pron: 'wav/pron/um.wav'
            }, {
                ch: ['on', 'om'],
                pron: 'wav/pron/on.wav'
            }, {
                ch: ['un', 'um'],
                pron: 'wav/pron/un.wav'
            }, {
                ch: ['um在词尾时，如album'],
                pron: 'wav/pron/album.wav'
            }, {
                ch: ['ien'],
                pron: 'wav/pron/ien.wav'
            }, {
                ch: ['oin'],
                pron: 'wav/pron/oin.wav'
            }, {
                ch: ['gn，如vigne'],
                pron: 'wav/pron/vigne.wav'
            }, ]
        };
    }
}
</script>

<template>
    <table class="table">
        <thead>
        <th scope="col" style="width: 100px;">字母</th>
        <th scope="col">发音</th>
        </thead>
        <tbody>
        <tr v-for="item in list">
            <td class="vcenter">
                <div v-for="i in item.ch">{{ i }}</div>
            </td>
            <td>
                <audio v-bind:src="item.pron" controls></audio>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<style scoped>
.vcenter {
    vertical-align: middle;
}
</style>